<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="搜索" left-arrow @click-left="$router.go(-1)" />
        </header>
        <main class="content">
            <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
            <van-empty v-if="list.length == 0" image="search" description="暂无搜到该商品" />
            <div v-else v-for="item in list" :key="item.id">
                <van-card :price="item.price" :title="item.title" :thumb="item.image" />
            </div>
        </main>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '@/utils/request';
const value = ref('');
const list = ref([])
// 封装请求搜索接口的函数
const query = () => {
    request.get('/search', {
        params: {
            value: value.value
        }
    }).then(res => {
        if (res.data.code == 200) {
            list.value = res.data.data
        }
    })
}
const onSearch = (val) => {
    query()
}

const onCancel = () => {
    query()
}
onMounted(() => {
    query()
})
</script>